<template>
	<transition name="region-selector-animate" enter-active-class="animated fadeInUp"
    leave-active-class="animated fadeOutDown" v-on:after-leave="afterLeave">
		<div v-if="show" class="region-selector-container" v-on:click.stop="">
			<div class="selector-title-wrapper">
				<span class="title">所在城市</span>
				<span class="icon icon-close" @click="closeSelector"></span>
			</div>
			<div class="region-selector-group">
				<div class="selector-result">
					<span v-if="selectedProvince!=''" class="selected-item" @click="showProvinceSelector">{{selectedProvince}}</span>
					<span v-if="selectedCity!=''" class="selected-item" @click="showCitySelector">{{selectedCity}}</span>
					<span v-if="!done" class="selected-item select-action">请选择</span>
				</div>
				<div class="region-item-list">
					<transition name="provinces-transition" enter-active-class="animated fadeIn"
    					leave-active-class="animated fadeOut">
						<ul v-if="provincesActive">
							<li class="region-item clearfix" v-bind:class="{active: province.code == selectedProvinceCode}" v-for="province in provinces" @click="selectProvince(province.code,province.name,province.fullName)">
								<span class="item-name">{{province.name}}</span>
								<span class="icon icon-selected"></span>
							</li>
						</ul>
					</transition>
					<transition name="cities-transition" enter-active-class="animated fadeIn"
    					leave-active-class="animated fadeOut">
						<ul v-if="citiesActive">
							<li class="region-item clearfix" v-bind:class="{active: city.code == selectedCityCode}" v-for="city in cities" @click="selectCity(city.code,city.name,city.fullName)">
								<span class="item-name">{{city.name}}</span>
								<span class="icon icon-selected"></span>
							</li>
						</ul>
					</transition>
					<loading :appear="processing"></loading>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
import loading from 'components/loading/loading'

export default {
	name: 'regionSelector',
	props: {
		show: {
	      type: Boolean
	    },
	    locationCode: {
	    	type: Number
	    }
	},
	data () {
		return {
			done: false,
			provincesActive: true,
			citiesActive: false,
			provinceAnimate: {'enter': 'fadeInRight', 'leave': 'fadeOutLeft'},
			citiyAnimate: {'enter': 'fadeInRight', 'leave': 'fadeRight'},
			processing: true,
			provinces: [],
			cities: [],
			selectedProvince: '',
			selectedProvinceCode: 0,
			selectedCity: '',
			selectedCityCode: 0
		}
	},
	created: function () {
		if (this.show && this.locationCode === 0) {
			this.$http.get('/freescan/region/getAllProvince').then((response) => {
				this.processing = false
				this.provinces = response.body
			})
		} else if (this.locationCode !== 0) {
			this.$http.get('/freescan/region/getParents?code=' + this.locationCode).then((response) => {
				this.processing = false
				response = response.body
				this.selectedProvinceCode = response.activeProvince.code
				this.selectedProvince = response.activeProvince.name
				this.selectedCityCode = response.activeCity.code
				this.selectedCity = response.activeCity.name
				this.provinces = response.provinces
				this.cities = response.cities
				this.done = true
				this.showCitySelector()
			})
		}
	},
	methods: {
		afterLeave: function () {
			this.$emit('selectorWillClose')
		},
		closeSelector: function () {
			this.$emit('selectorClose')
		},
		selectProvince: function (code, name, fullName) {
			if (this.selectedProvinceCode !== code) {
				this.selectedProvinceCode = code
				this.selectedProvince = name
				this.processing = true
				this.selectedCity = ''
				this.selectedCityCode = 0
				this.done = false
				this.$http.get('/freescan/region/getByParentCode?parentCode=' + code).then((response) => {
					this.processing = false
					this.cities = response.body
					this.showCitySelector()
				})
			}
		},
		selectCity: function (code, name, fullName) {
			this.selectedCityCode = code
			this.selectedCity = name
			this.done = true
			this.$emit('finishedCitySelector', code, fullName)
		},
		showProvinceSelector: function () {
			this.provincesActive = true
			this.citiesActive = false
		},
		showCitySelector: function () {
			this.provincesActive = false
			this.citiesActive = true
		}
	},
	components: {
		loading
	}
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
	.fadeInUp, .fadeOutDown, .fadeIn, .fadeOut
		animation-duration 0.5s
	.region-selector-container
		position absolute
		bottom 0px
		width 100%
		height 320px
		background-color #ffffff
		box-shadow 0 0 10px rgba(0, 0, 0, 0.5)
		.selector-title-wrapper
			height 32px
			line-height 32px
			font-size 15px
			text-align center
			color #5c5c5c
			.icon-close
				display block
				float right
				height 32px
				width 32px
				line-height 32px
		.region-selector-group
			position relative
			display block
			font-size 14px
			.selector-result
				display block
				height 26px
				line-height 26px
				padding 0px 8px
				border-bottom 1px solid #eeeeee
				.selected-item
					display inline-block
					padding 0px 6px
					&.select-action
						color #f4a64d
						border-bottom 1px solid #f4a64d
			.region-item-list
				display block
				position relative
				width 100%
				height 263px
				overflow-y auto
				overflow-x hidden
				#process
					position fixed
					width 100px
					height 100px
					top 100%
					left 50%
					margin-left -50px
					margin-top -180px
				ul
					display block
					margin 0px
					li
						display block
						&.region-item
							margin 0
							padding 0px 10px
							height 30px
							line-height 30px
							.item-name
								float left
								display block
								padding 0px 4px
							.icon-selected
								display none
								font-size 18px
								line-height 32px
							&.active
								color #f4a64d
								.icon-selected
									display inline-block
</style>